import { getCityValue, getHospitalList, getprovinceValue, getquValue } from '@/api/hospitallist/hospitalLList';
import { ReqHospitallistList, ReqHospitallistiteam, ReqprovinceList } from '@/api/hospitallist/model/hospitalListType';
import { Button, Card, Checkbox, Form, Input, Select, Table } from 'antd'
import { useForm } from 'antd/lib/form/Form';
import { ColumnsType } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'
const { Option } = Select;
export default function HospitalList() {
let [from] =   useForm()

  let [current, setcurrent] = useState<number>(1)
  let [total, settotal] = useState<number>(50)
  let [pageSize, setpageSize] = useState<number>(10)
  // 存储医院数据
  let [hospital, setHospital] = useState<ReqHospitallistList>([])
  // 存储省份数据
  let [province, setprovince] = useState<ReqprovinceList>([])
  // 存储市份数据
  let [city, setCity] = useState<ReqprovinceList>([])
  // 存储区份数据
  let [qu, setqu] = useState<ReqprovinceList>([])
  // 初始化获取列表数据
  let getHospitalListValue = async (page = current, limit = pageSize) => {
    let res = await getHospitalList({ page, limit })
    setHospital(res.content)
    settotal(res.totalElements)
  }
  // 获取省份
  let getprovince = async () => {

    let res = await getprovinceValue()
    setprovince(res)
    
   
  }
  // 获取市
  let getcity = async (value: number) => { 
    from.setFieldsValue({cityCode:undefined,districtCode:undefined})
    setqu([])
    let res = await getCityValue(value)
    setCity(res)
  }
  // 获取区数据
  let getqu = async (value: number) => {
    from.setFieldsValue({districtCode:undefined})
    let res = await getquValue(value)
    setqu(res)
  }
  // 模拟生命周期
  useEffect(() => {
    getHospitalListValue()
  }, [current, pageSize])
  // 模拟生命周期
  useEffect(() => {
    getprovince()
  }, [])

  const columns: ColumnsType<any> = [
    {
      align: "center",
      title: '序号',
      render(key: string, text: string, index: number) {
        return index + 1
      }
    },
    {
      align: "center",
      title: '医院logo',
      dataIndex: 'logoData',
      render(text) {
        return <img style={{ width: 100 }} src={`data:image/jpeg;base64,${text}`} alt="" />
      }

    },
    {
      align: "center",
      title: '医院名称',
      dataIndex: 'hosname',

    },
    {
      align: "center",
      title: '等级',
      dataIndex: 'param',
      render(text) {
        return text.hostypeString
      }

    },
    {
      align: "center",
      title: '详细地址',
      render(row: ReqHospitallistiteam) {
        return row.param.fullAddress

      }

    },
    {
      align: "center",
      title: '状态',
      dataIndex: 'status',

    },
    {
      align: "center",
      title: '创建时间',
      dataIndex: 'createTime',

    },
    {
      align: "center",
      title: '操作',
      render() {
        return <span>
          <Button htmlType="submit" type="primary">查看</Button>
          <Button htmlType="submit" type="primary" className='ml'>排版</Button>
          <Button htmlType="submit" type="primary" className='ml'>上线</Button>
        </span>
      }

    },
  ];
  return (
    <Card>
      {/* form表单 */}
      <Form
      form={from}
        layout="inline"
      >
        <Form.Item
          name="provinceCode"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择省份" onChange={getcity}>
            {
              province.map((Item) => {
                return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="cityCode"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择市" onChange={getqu}>
            {
              city.map((Item) => {
                return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item
          name="districtCode"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择区">
            {
              qu.map((Item) => {
                return <Option key={Item.id} value={Item.id}>{Item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"

        >
          <Input placeholder='医院编码' />
        </Form.Item>
        <Form.Item
          name="hostype"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择医院类型">
            <Option>11111111</Option>
          </Select>
        </Form.Item>
        <Form.Item
          className='mt'
          name="status"
          style={{ width: 200 }}
        >
          <Select placeholder="请选择医院状态">
            <Option>11111111</Option>
          </Select>
        </Form.Item>
        <Form.Item className='mt'>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button className='ml' type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
      {/* 表格 */}
      <Table
        bordered
        className='mt'
        rowKey="id"
        pagination={{
          current: current,
          total: total,
          pageSizeOptions: [5, 10, 15, 20],
          showQuickJumper: true,
          pageSize: pageSize,
          showSizeChanger: true,
          showTotal(total: number) {
            return <span>{total}</span>
          },
          onChange(page: number, pageSize: number) {
            setcurrent(page)
            setpageSize(pageSize)

          }
        }
        }

        columns={columns} dataSource={hospital} />;
    </Card>
  )
}
